<template>
<div style="width: 1200px;margin: 0 auto">
  <el-row :gutter="10">
    <el-col :span="6" v-for="item in contentArr" style="margin-top: 10px">
      <el-card>
        <router-link :to="'/detail?id='+item.id">
          <img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%;height:150px">
          <p style="height: 40px">{{item.title}}</p>
        </router-link>
        <el-row :gutter="10">
          <el-col :span="4">
            <el-avatar :src="'http://localhost:8080'+item.userImgUrl"></el-avatar>
          </el-col>
          <el-col :span="10" style="font-size: 20px;line-height: 40px">{{nickname}}</el-col>
          <el-col :span="10" style="line-height: 40px">{{categoryName}}</el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script setup>
import {onBeforeUpdate, onMounted, ref} from "vue";
  import axios from "axios";
  const contentArr = ref([]);
  const loadContents = ()=>{
    if (location.search.includes('wd')){//搜索
      let wd = new URLSearchParams(location.search).get('wd');
      axios.get('http://localhost:8080/v1/contents/'+wd+"/search")
      .then((response)=>{
        if (response.data.code==2001){
          contentArr.value = response.data.data;
        }
      })
    }else{
      let type = new URLSearchParams(location.search).get('type');
      console.log(type);
      axios.get('http://localhost:8080/v1/contents/'+type+"/type")
          .then((response)=>{
            if (response.data.code==2001){
              contentArr.value = response.data.data;
            }
          })
    }

  }
  onBeforeUpdate(()=>{
    loadContents();
  })
  onMounted(()=>{
   loadContents();
  })
</script>

<style scoped>

</style>